<template>
  <div class="list">
	  <header>
		  <div class="returns">
			  <i class="iconfont icon-fanhui"></i>
		  </div>
		  <div class="search">
			 <i class="iconfont icon-fangdajing"></i>
			  <span>搜你喜欢的...</span>
		  </div>
		  <div class="go-home">
			  <img src="@/assets/images/home.png" alt="" />
		  </div>
	  </header>
	  <section>
		  <div class="list-l">
			  <ul class="l-item">
				  <li v-for="(item,index) in leftData" :key="index" class="active">{{item.name}}</li>
				</ul>
		  </div>
		  
		  <div class="list-r">
			  <ul  v-for='(item,index) in rightData'
				  :key='index'
				  class="shop-list"
				  >
				  <li
				      v-for="(k,i) in item"
					  :key='i'
				  >
					  <h2>{{k.name}}</h2>
					  <ul class="r-content">
						  <li v-for="(j,idx) in k.list" :key='idx'>
							  <img :src="j.imgUrl" alt="">
							  <span>{{j.name}}</span>
						  </li>
					  </ul>
				  </li>
			  </ul>
		  </div>
	  </section>
	  <Tabber></Tabber>
  </div>
</template>

<script>
// import Header from '@/components/home/Header.vue'
import Tabber from '@/components/common/Tabber.vue'
import http from '../common/api/request.js'
export default {
  name: "List",
  data (){
	  return {
		  leftData:[],//左侧数据
		  rightData:[]//右侧数据
	  }
  },
  components:{
  	  Tabber,
	  // Header
  },
  async created(){
	 let res =await http.$axios({
	 	  url:'/api/goods/list'
	  })
	  
	  let leftArr = [];
	  let rightArr = [];
	  
	  res.forEach(v=>{
		leftArr.push({
			id:v.id,
			name:v.name
		}) 
		rightArr.push( v.data);
		console.log(v.data)
	  })
	  
	 // this.items = Object.freeze(res.topBar);
	 // this.newData = Object.freeze(res.data);
	 // console.log( leftArr )
	this.leftData = leftArr;
	this.rightData = rightArr;
  }
};
</script>

<style scoped lang="scss">
	.list{
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		section{
			display: flex;
			flex: 1;
			overflow: hidden;
		}
	}
	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.173333rem;
		background-color: #b0352f;
		.returns{
			line-height: 1.173333rem;
			padding: 0 0.533333rem;
			i{
				color:#666;
				font-size: 0.693333rem;
			}
		}
		.search{
			display: flex;
			align-items:center;
			flex: 1;
			padding: 0.16rem 0.266667rem;
			background-color: #FFFFFF;
			border-radius: 0.64rem;
			i{
				padding-right: 0.16rem;
				color: #666;
				font-size: 0.48rem;
			}
			span{
				color: #666;
				font-size: 0.373333rem;
			}
		}
		.go-home{
			padding: 0 0.266667rem;
			line-height: 1.2rem;
			img{
				width: 0.48rem;
				height:0.48rem;
			}
		}
	}
	.list-l{
		width:2.48rem;
		background-color: #fff;
		border-right: 1px solid #cccccc;
		overflow: hidden;
		.l-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			li{
				width:100%;
				padding: 0.08rem 0;
				margin: 0.533333rem 0;
				text-align: center;
				font-size: 0.373333rem;	
			}
		}
	}
	.active{
		color: #b54f4a;
		border-left: 6px solid #b54f4a;
	}
	.list-r{
		flex: 1;
		overflow: hidden;
		.shop-list{
			text-align: center;
			h2{
				padding: 0.533333rem 0;
				font-size: 0.64rem;
				font-weight: 400;
			}
			.r-content{
				display: flex;
				flex-wrap: wrap;
				li{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width:33.33%;
					padding: 0.266667rem 0;
					// margin: 0.266666rem;
					img{
						width: 1.413333rem;
						height:1.413333rem;
					}
					span{
						font-size: 0.426666rem;
					}
				}
			}
		}
	}
	::v-deep .tabber{
		border-top: 1px solid #cccccc;
	}
</style>
